<script setup lang="ts">
import {reactive, ref} from 'vue'
import {MedicineData} from "@/api/medicine";
import SelectMedicine from "@/component/select-medicinev2/SelectMedicine.vue";

const form1 = reactive({
  code: '10301'
})
const form2 = reactive({
  name: ''
})
const form3 = reactive({
  name: ''
})
const selection = ref<Partial<MedicineData>>({})

const handleSelectChange = (row: MedicineData) => {
  selection.value = row
}

</script>

<template>
  <div>
    <h2>选药品组件</h2>
    <div class="demo-label">基础用法</div>
    <SelectMedicine v-model="form1.code" />
    <div>结果值：{{ form1 }}</div>
    <div class="demo-label">使用回调</div>
    <SelectMedicine v-model="form2.name" @callback="handleSelectChange"/>
    <SelectMedicine v-model="form3.name" @callback="handleSelectChange"/>
    <el-button @click="form3.name = '10301'">cccc</el-button>
    <div>结果值：{{ form2 }}</div>
    <div>结果值：{{ form3 }}</div>
    <div>回调返回值：</div>
    <pre>{{ selection }}</pre>
  </div>
</template>

<style scoped lang="scss">
.demo-label {
  padding: 10px 5px;
  font-size: 20px;
  font-weight: 700;
}
</style>